<template>
	<view class="weui-tabbar" :class="extClass" style="position:fixed;bottom:0;width:100%;left:0;right:0;z-index: 9999;">
		<!-- 选中的时候往weui-tabbar__item加class:weui-bar__item_on -->
		<view @click="tabChange(index)" v-for="(item, index) in tabBarList" :key="index" class="weui-tabbar__item" :class="{'weui-bar__item_on':index === currentIndex}">
			<view>
				<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon" :class="index==midIndex&&showMidButton?'mid-btn':''"></image>
			</view>
			<view class="weui-tabbar__label" :class="index==midIndex&&showMidButton?'mid-btn-text':''">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * hans-tabbar 底部导航栏自定义组件
	 * @description 本组件一般用于原生的底部导航栏无法满足需求时的情况（拥有中间按钮，以及可以动态配置导航栏）。
	 * @property {Array} tabBarList 导航页面列表：
	 * 此参数特殊不能通过组件参数传递，需在main.js定义全局参数
	 * Vue.prototype.tabBarList = [{
							"pagePath": "pages/overtime/otList",
							"iconPath": "/static/otList.png",
							"selectedIconPath": "/static/otList_select.png",
							"text": "加班调休统计"
						},
						{
							"pagePath": "pages/audit/index",
							"iconPath": "/static/empList.png",
							"selectedIconPath": "/static/empList_select.png",
							"text": "流程审核"
						},
						{
							"pagePath": "pages/my/myList",
							"iconPath": "/static/my.png",
							"selectedIconPath": "/static/my_select.png",
							"text": "个人中心"
						}
					]
	 * @property {String} currentIndex 当前tab索引
	 * @property {Boolean} showMidButton 是否显示中间按钮
	 * @event {Function} @tabChange 切换tab事件
	 * @example <u-jk-hans-tabbar  :currentIndex="currentIndex" @tabChange="tabChange"></u-jk-hans-tabbar>
	 */
	export default {
		name:'u-jk-hans-tabbar',
		props: {
			currentIndex: { //当前tab索引
				type: [Number, String],
				default: 0
			},
			// tabBarList: {
			// 	type: [Array],
			// 	default: []
			// },
			showMidButton: {//是否显示中间按钮
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {
				extClass: '',
				tabBarList: this.tabBarList,
				midIndex:''
			};
		},
		created() {
			// console.log((this.tabBarList.length/2).toFixed(0))
			this.midIndex = Number((this.tabBarList.length/2).toFixed(0)-1)
				//#ifdef MP-WEIXIN
				  //隐藏底部导航
					uni.hideTabBar();
				//#endif

		},
		methods: {
			 //切换tab事件
			tabChange(index) {
				if (index === this.currentIndex) {
					return;
				}
				var url = this.tabBarList[index].pagePath;
				//#ifdef H5
					uni.navigateTo({
							url: `../../${url}`,
							fail(e) {
								console.log(e);
							}
					})
				//#endif
				//#ifdef MP
					uni.switchTab({
						url: `../../${url}`,
						fail(e) {
							console.log(e);
						}
					})
				//#endif
				
				// 切换tab事件回调
				this.$emit('tabChange', index)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mid-btn {
		width: 140rpx !important;
		height: 130rpx !important;
		margin-top: -84rpx;
	}

	.mid-btn-text {
		color: #1296db !important;
		font-size: 12px !important;
	}

	.weui-tabbar {
		display: flex;
		position: relative;
		z-index: 500;
		background-color: #ffffff;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
		// border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.big {
		width: 100rpx;
		height: 100rpx;
	}

	.weui-tabbar__item {
		display: block;
		flex: 1;
		padding: 8px 0 4px;
		padding-bottom: calc(8px + constant(safe-area-inset-bottom));
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
		font-size: 0;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.weui-tabbar__item:first-child {
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}

	.weui-tabbar__item:last-child {
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}

	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
		color: #1296db;
	}

	.weui-tabbar__icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-bottom: 2px;
	}

	i.weui-tabbar__icon,
	.weui-tabbar__icon>i {
		font-size: 24px;
		color: rgba(0, 0, 0, 0.5);
	}

	.weui-tabbar__icon image {
		width: 100%;
		height: 100%;
	}

	.weui-tabbar__label {
		color: #bfbfbf;
		font-size: 10px;
		// line-height: 1.4;
	}

	.uni-tabbar .uni-tabbar__item:nth-of-type(4) .uni-tabbar__icon {
		width: 44px !important;
		height: 44px !important;
	}
</style>
